<%--
  Created by IntelliJ IDEA.
  User: dab
  Date: 2025/7/13
  Time: 07:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧农业技术体系</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2E7D32', // 深绿色
                        secondary: '#4CAF50', // 绿色
                        accent: '#81C784', // 浅绿色
                        light: '#E8F5E9', // 极浅绿
                        dark: '#1B5E20', // 墨绿色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)',
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
            .transition-transform-opacity {
                transition-property: transform, opacity;
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-gray-800">
<!-- 页面头部 -->
<header class="bg-gradient-to-r from-primary to-dark text-white py-8 px-4 md:px-8">
    <div class="container mx-auto">
        <h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold tracking-tight mb-2">
            <i class="fa fa-leaf mr-3 animate-pulse"></i>智慧农业技术体系
        </h1>
        <p class="text-accent/90 text-[clamp(1rem,2vw,1.25rem)] max-w-3xl">
            融合现代科技与农业生产的创新解决方案
        </p>
    </div>
</header>

<!-- 主内容区 -->
<main class="container mx-auto py-10 px-4 md:px-8">
    <!-- 基础技术与架构 -->
    <section class="mb-12 transform transition-all duration-300 hover:scale-[1.01]">
        <div class="bg-white rounded-xl shadow-card overflow-hidden">
            <div class="bg-secondary/10 border-l-4 border-primary p-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-primary flex items-center">
                    <i class="fa fa-cogs mr-3 text-primary/80"></i>9.1 基础技术与架构
                </h2>
            </div>

            <!-- 数据库技术 -->
            <div class="p-6 md:p-8">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-database mr-2 text-secondary"></i>9.1.1 数据库技术
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    采用分布式数据库技术，如 HBase、MongoDB 等，用于存储海量的农业生产数据、环境监测数据、用户信息等。分布式数据库具有高扩展性、高可靠性和高性能的特点，能够满足智慧农业系统对数据存储和处理的需求。同时，采用数据分片和复制技术，提高数据的访问效率和安全性。建立数据索引机制，加快数据查询速度，确保用户能够快速获取所需数据。
                </p>
            </div>

            <!-- 架构技术 -->
            <div class="p-6 md:p-8 bg-light/50">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-sitemap mr-2 text-secondary"></i>9.1.2 架构技术
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    采用微服务架构，将智慧农业综合管理平台拆分为多个独立的微服务模块，如环境监测服务、智能控制服务、数据分析服务、用户管理服务等。每个微服务模块可以独立开发、部署和维护，提高系统的灵活性和可扩展性。采用容器化技术，如 Docker，对微服务进行封装和管理，实现系统的快速部署和迁移。通过 API 网关实现各微服务模块之间的通信和集成，确保系统的整体协同工作。同时，采用云原生架构，将系统部署在云端，实现按需分配资源、弹性扩展和高可用性。
                </p>
            </div>
        </div>
    </section>

    <!-- 数据处理与分析技术 -->
    <section class="mb-12 transform transition-all duration-300 hover:scale-[1.01]">
        <div class="bg-white rounded-xl shadow-card overflow-hidden">
            <div class="bg-secondary/10 border-l-4 border-primary p-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-primary flex items-center">
                    <i class="fa fa-line-chart mr-3 text-primary/80"></i>9.2 数据处理与分析技术
                </h2>
            </div>

            <!-- 数据采集与清洗 -->
            <div class="p-6 md:p-8">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-filter mr-2 text-secondary"></i>9.2.1 数据采集与清洗
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    通过部署在田间地头、温室大棚等场所的传感器、摄像头等设备，实时采集农业生产环境数据、农作物生长状态数据、设备运行数据等。采用边缘计算技术，在数据采集端对数据进行初步处理和过滤，减少数据传输量和云端处理压力。对采集到的数据进行清洗，去除噪声数据、重复数据和异常数据，确保数据的准确性和完整性。采用数据校验和纠错技术，提高数据的可靠性。
                </p>
            </div>

            <!-- 数据分析 -->
            <div class="p-6 md:p-8 bg-light/50">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-bar-chart mr-2 text-secondary"></i>9.2.2 数据分析
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    运用大数据分析技术，如机器学习、数据挖掘、统计分析等，对清洗后的数据分析。建立农作物生长模型，分析环境因素对农作物生长的影响，为精准种植提供决策支持；通过对设备运行数据的分析，预测设备故障，提前进行维护保养；对用户行为数据进行分析，了解用户需求和使用习惯，为用户提供个性化的服务和推荐。采用实时分析和离线分析相结合的方式，实时分析用于处理实时数据，及时响应系统需求；离线分析用于对历史数据进行深度挖掘，提取有价值的信息和知识。
                </p>
            </div>

            <!-- 数据应用 -->
            <div class="p-6 md:p-8">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-cogs mr-2 text-secondary"></i>9.2.3 数据应用
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    将数据分析的结果应用于智慧农业的各个环节。通过智能控制算法，根据环境监测数据和农作物生长模型，自动控制灌溉、施肥、通风等设备的运行，实现精准种植；将农产品质量追溯数据应用于农产品销售环节，提高消费者对农产品的信任度；为政府部门提供农业生产数据和分析报告，为农业政策制定和农业资源管理提供决策依据。同时，通过数据可视化技术，将数据分析结果以图表、地图等直观的方式呈现给用户，方便用户理解和使用。
                </p>
            </div>
        </div>
    </section>

    <!-- 模型应用技术 -->
    <section class="mb-12 transform transition-all duration-300 hover:scale-[1.01]">
        <div class="bg-white rounded-xl shadow-card overflow-hidden">
            <div class="bg-secondary/10 border-l-4 border-primary p-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-primary flex items-center">
                    <i class="fa fa-calculator mr-3 text-primary/80"></i>9.3 模型应用技术
                </h2>
            </div>

            <!-- 传统模型 -->
            <div class="p-6 md:p-8">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-line-chart mr-2 text-secondary"></i>9.3.1 传统模型
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    运用传统的数学模型和统计模型，如回归分析模型、时间序列模型、决策树模型等，对农业生产数据进行分析和预测。例如，利用回归分析模型分析土壤肥力与农作物产量之间的关系，为合理施肥提供依据；采用时间序列模型预测农作物的生长周期和产量，为农业生产计划制定提供支持；通过决策树模型对病虫害进行分类和识别，提高病虫害防治的准确性。
                </p>
            </div>

            <!-- 新技术模型 -->
            <div class="p-6 md:p-8 bg-light/50">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-rocket mr-2 text-secondary"></i>9.3.2 新技术模型
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    引入深度学习模型、强化学习模型等新技术模型，提高数据分析和预测的精度和效率。利用卷积神经网络（CNN）对农作物病虫害图像进行识别和分类，识别准确率可达 [X]% 以上；采用循环神经网络（RNN）对农作物生长过程进行动态预测，提高预测的准确性；通过强化学习模型优化智能灌溉和施肥策略，实现资源的最优配置。同时，结合迁移学习技术，利用已有的数据和模型，快速适应新的农业生产场景和作物类型。
                </p>
            </div>
        </div>
    </section>

    <!-- 新兴前沿技术 -->
    <section class="mb-12 transform transition-all duration-300 hover:scale-[1.01]">
        <div class="bg-white rounded-xl shadow-card overflow-hidden">
            <div class="bg-secondary/10 border-l-4 border-primary p-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-primary flex items-center">
                    <i class="fa fa-lightbulb-o mr-3 text-primary/80"></i>9.4 新兴前沿技术
                </h2>
            </div>

            <!-- 生成式 AI 技术 -->
            <div class="p-6 md:p-8">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-magic mr-2 text-secondary"></i>9.4.1 生成式 AI 技术
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    将生成式 AI 技术应用于智慧农业领域。利用生成式 AI 技术生成农作物生长模拟图像、病虫害模拟场景等，为农业技术培训和教学提供直观的素材；根据用户输入的农业生产条件和需求，生成个性化的种植方案和管理建议，提高方案的科学性和针对性；通过生成式 AI 技术创作农业科普内容、市场推广文案等，提高信息传播的效果和效率。
                </p>
            </div>

            <!-- 区块链技术 -->
            <div class="p-6 md:p-8 bg-light/50">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-link mr-2 text-secondary"></i>9.4.2 区块链技术
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    采用区块链技术实现农产品质量追溯。将农产品生产、加工、流通等环节的信息记录在区块链上，形成不可篡改的分布式账本。消费者可以通过扫描农产品上的二维码，查询区块链上的相关信息，了解农产品的全生命周期情况，确保农产品质量可追溯。同时，区块链技术还可以用于农业供应链金融，通过对供应链信息的可信记录，提高金融机构对农业企业的信贷评估效率和准确性。
                </p>
            </div>

            <!-- 元宇宙技术 -->
            <div class="p-6 md:p-8">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-globe mr-2 text-secondary"></i>9.4.3 元宇宙技术
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    探索元宇宙技术在智慧农业中的应用。构建虚拟的农业生产场景，用户可以在虚拟环境中模拟农作物种植、养殖等过程，进行农业技术试验和培训；通过元宇宙平台实现远程农业生产管理，用户可以在虚拟环境中查看农田的实时情况，远程控制农业设备的运行；利用元宇宙技术开展农业展览和交流活动，打破时间和空间的限制，促进农业技术的传播和合作。
                </p>
            </div>

            <!-- 多模态交互技术 -->
            <div class="p-6 md:p-8 bg-light/50">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-comments mr-2 text-secondary"></i>9.4.4 多模态交互技术
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    采用多模态交互技术，提高用户与智慧农业系统的交互体验。支持语音交互，用户可以通过语音指令控制设备运行、查询数据等；实现手势交互，用户可以通过手势在触摸屏上进行操作，方便快捷；利用增强现实（AR）和虚拟现实（VR）技术，为用户提供沉浸式的交互体验，如通过 AR 技术查看农作物生长状态的详细信息，通过 VR 技术模拟农业生产场景。
                </p>
            </div>
        </div>
    </section>

    <!-- 基于专业知识解决实际需求 -->
    <section class="mb-12 transform transition-all duration-300 hover:scale-[1.01]">
        <div class="bg-white rounded-xl shadow-card overflow-hidden">
            <div class="bg-secondary/10 border-l-4 border-primary p-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-primary flex items-center">
                    <i class="fa fa-book mr-3 text-primary/80"></i>9.5 基于专业知识解决实际需求
                </h2>
            </div>

            <!-- 学科专业知识运用 -->
            <div class="p-6 md:p-8">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-graduation-cap mr-2 text-secondary"></i>9.5.1 学科专业知识运用
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    综合运用农业科学、计算机科学、环境科学、管理学等多学科专业知识，解决智慧农业中的实际需求。例如，运用农业科学知识，了解农作物的生长习性和需水需肥规律，为智能灌溉和施肥提供依据；利用计算机科学知识，开发智慧农业综合管理平台和相关算法，实现数据的采集、处理和分析；结合环境科学知识，监测和评估农业生产对生态环境的影响，制定环境保护措施；运用管理学知识，优化项目的运营管理和市场营销策略，提高项目的经济效益和社会效益。
                </p>
            </div>

            <!-- 创新理念和范式应用 -->
            <div class="p-6 md:p-8 bg-light/50">
                <h3 class="text-xl md:text-2xl font-semibold text-dark mb-4 flex items-center">
                    <i class="fa fa-lightbulb-o mr-2 text-secondary"></i>9.5.2 创新理念和范式应用
                </h3>
                <p class="text-gray-700 leading-relaxed text-balance">
                    引入创新理念和范式，如开源创新、协同创新、服务型制造等，推动智慧农业的发展。采用开源技术和平台，降低系统开发成本，促进技术共享和创新；建立协同创新平台，整合政府、企业、高校、科研机构等多方资源，共同开展智慧农业技术研发和应用；以服务型制造理念为指导，将产品和服务相结合，为用户提供全方位的智慧农业解决方案，提高用户的满意度和忠诚度。
                </p>
            </div>
        </div>
    </section>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="fixed bottom-6 right-6 bg-primary hover:bg-dark text-white rounded-full p-3 shadow-lg transition-all duration-300 opacity-0 invisible">
        <i class="fa fa-arrow-up"></i>
    </button>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-10 px-4 md:px-8">
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-6 md:mb-0">
                <h3 class="text-xl font-bold mb-2 flex items-center">
                    <i class="fa fa-leaf mr-2 text-accent"></i>智慧农业技术体系
                </h3>
                <p class="text-gray-400 max-w-md">
                    融合现代科技与农业生产，推动农业数字化转型
                </p>
            </div>
            <div class="flex space-x-4">
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-github text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-twitter text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-linkedin text-xl"></i>
                </a>
            </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; 2025 智慧农业技术研究中心. 保留所有权利.</p>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 回到顶部按钮
    const backToTopButton = document.getElementById('backToTop');

    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) {
            backToTopButton.classList.remove('opacity-0', 'invisible');
            backToTopButton.classList.add('opacity-100', 'visible');
        } else {
            backToTopButton.classList.remove('opacity-100', 'visible');
            backToTopButton.classList.add('opacity-0', 'invisible');
        }
    });

    backToTopButton.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // 添加淡入动画
    document.addEventListener('DOMContentLoaded', () => {
        const sections = document.querySelectorAll('section');

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('opacity-100');
                    entry.target.classList.remove('opacity-0', 'translate-y-4');
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });

        sections.forEach(section => {
            section.classList.add('opacity-0', 'translate-y-4', 'transition-all', 'duration-700');
            observer.observe(section);
        });
    });
</script>
</body>
</html>